/*
 * Copyright © 2016-2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.scss";
$entity-card-border: 1px solid #cccccc;
$jump-button-container-size: 80px;

@mixin selected-card($color) {
  .card-body {
    background: $color;
    color: white;

    .entity-id-container small {
      color: white;
    }
    .metrics-container {
      .metric-item {
        p {
          color: white;
        }
      }
    }
    .fast-actions-container {
      background: $color;
      h4 {
        vertical-align: top;
        > span {
          border: 0;
          padding: 0;
          vertical-align: top;
          display: inline-block;
          background: transparent;
          &:hover {
            background: transparent;
          }
        }
      }
      .btn-link {
        color: white;
      }
    }
  }
}

.entity-cards {
  padding: 0;
  text-align: left;
  border-radius: 0;
  position: relative;
  box-shadow: 0px 1px 10px 0 rgba(0, 0, 0, 0.3);
  // width: 300px;
  margin: 5px;
  display: inline-block;

  &.active {

    &.datapipeline {
      @include selected-card($hydrator-blue);
    }
    &.application {
      @include selected-card($application-entity-header-bg);
    }
    &.datasetinstance {
      @include selected-card($datasetinstance-entity-header-bg);
    }
    &.stream {
      @include selected-card($stream-entity-header-bg);
    }
  }

  // FIXME: Right now only programs and artifacts will not be clickable.
  &.datapipeline,
  &.application,
  &.datasetinstance,
  &.stream {
    .cask-card {
      cursor: pointer;
    }
  }
  .cask-card {
    padding: 0;
    .card-header {
      color: white;
      padding: 0;

      .card-header-wrapper {
        width: 100%;
        display: flex;
      }
    }
    .card-body {
      padding: 0;
    }
  }
  .entity-information {
    height: 35px;
    border-bottom: $entity-card-border;
  }

  .jump-button-container,
  .entity-id-container {
    display: inline-block;
  }

  .jump-button-container {
    width: $jump-button-container-size;
    height: 100%;

    .jump-button { margin-top: 3px; }
  }

  .entity-id-container {
    width: 100%;
    padding-left: 10px;
    margin-top: 3px;
    position: relative;

    &.with-version {
      margin-top: 0;
    }

    h4 {
      font-weight: 500;
      font-size: 15px;
      margin: 0;
      vertical-align: middle;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 18px;
      position: absolute;
      bottom: -5px;

      &.with-version { line-height: initial; }
    }

    small {
      font-size: 9px;
      color: #999999;
      display: block;
      margin-top: 5px;
      position: absolute;
    }
  }

  .metrics-container {
    display: flex;

    .metric-item {
      flex-grow: 1;
      text-align: center;
      padding: 0;

      p {
        margin-bottom: 4px;
        color: #333333;
      }
      .metric-header {
        font-weight: 500;
        font-size: 11px;
        margin-bottom: 3px;
        color: #999999;
      }

      &:not(:last-child) {
        border-right: $entity-card-border;
      }

      &.app-name {
        max-width: 50%;

        p {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 95%;
          margin-left: 3px;
        }
      }
    }
  }

  .fast-actions-container {
    background-color: white;
    padding: 2px 0;
    border-top: 1px solid #cccccc;

    .btn-link {
      text-decoration: none;
      font-size: 13px;
      color: #4f5050;
      padding: 0;
      vertical-align: top;
      margin: 0 15px;
      &[disabled] {
        color: #818a91;
      }
    }

    h4 {
      margin: 0;
      vertical-align: top;
      > span {
        border: 0;
        padding: 0;
        vertical-align: top;
        display: inline-block;
      }
    }
  }
}
